Ajouter un bouton d'action flottant

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment ajouter des composants dans Compose.
Bouton d'action flottant →

Un bouton d'action flottant (FAB) est un bouton circulaire qui déclenche l'action principale dans l'UI de votre application. Cette page vous explique comment ajouter le FAB à votre mise en page, personnaliser son apparence et répondre aux appuis sur le bouton.

Pour savoir comment concevoir un bouton d'action flottant dans votre application conformément aux consignes Material Design, consultez également Boutons : bouton d'action flottant.

Figure 1 : Bouton d'action flottant

Ajouter le bouton d'action flottant à votre mise en page

Le code suivant montre comment FloatingActionButton doit apparaître dans votre fichier de mise en page : 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Par défaut, la couleur du FAB est définie par l'attribut colorAccent, que vous pouvez personnaliser avec la palette de couleurs du thème.

Vous pouvez configurer d'autres propriétés du FAB à l'aide d'attributs XML ou de méthodes correspondantes, comme les suivantes :

  • Taille du FAB, à l'aide de l'attribut app:fabSize ou de la méthode setSize().
  • Couleur de l'onde du FAB, à l'aide de l'attribut app:rippleColor ou de la méthode setRippleColor().
  • L'icône du bouton d'action flottant, à l'aide de l'attribut android:src ou de la méthode setImageDrawable().

Répondre aux commandes tactiles

Vous pouvez ensuite appliquer un View.OnClickListener pour gérer les appuis sur le FAB. Par exemple, le code suivant affiche un Snackbar lorsque l'utilisateur appuie sur le bouton d'action flottant :

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Pour en savoir plus sur les fonctionnalités du FAB, consultez la documentation de référence de l'API pour FloatingActionButton.